<template>
  <p>App</p>
  <p>{{ $store.state.counter.count }}</p>
  <p>{{ count }}</p>
  <p>{{ $store.getters["counter/oddOrEven"] }}</p>
  <p>{{ oddOrEven }}</p>
  <p></p>
  <button @click="handleIncrement">+</button>
</template>

<script lang="ts">
import { mapState, mapGetters, mapActions } from "vuex";

export default {
  name: "App",
  computed: {
    ...mapState("counter", ["count"]),
    ...mapGetters("counter", ["oddOrEven"]),
  },
  methods: {
    ...mapActions("counter", ["increment"]),
    handleIncrement() {
      this.increment(1);
    },
  },
};
</script>

<style scoped></style>
